<template>
  <div class="theme-btn" v-if="settingBtnVisble">
    <el-tooltip effect="dark" content="主题设置" placement="left-start">
      <el-button class="theme-btn-open" type="info" icon="el-icon-setting" circle @click="drawerVisible = true"></el-button>
    </el-tooltip>
    <el-drawer
      :title="'设置主题'"
      :visible.sync="drawerVisible"
      :direction="'rtl'"
      :modal="true"
      @close="handlerDrawerClose"
      size="20%"
      :append-to-body="true">
      <div class="theme">
        <div class="theme-block">
          <el-row class="theme-navbar">
            <p>导航及侧边栏颜色</p>
          </el-row>
          <el-button v-for="(item, index) in navbarThemes" :key="index" @click="handlerBtnClick(item.color)" :style="`background-color: ${item.color};`">
            <i v-if="item.isSwitch" class="el-icon-check"></i>
            <i v-else>&nbsp;</i>
          </el-button>
        </div>
        <div class="theme-block">
          <p>字体样式(黑色为默认)</p>
          <div class="font-theme-block" v-for="(item, index) in fontThemes" :key="index" @click="handlerFontTheme(item.color)" :style="`background-color: ${item.color};`">
            <i v-if="item.isChecked" class="el-icon-check"></i>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      settingBtnVisble: false,
      // 本地存储的变量名
      localThemeName: 'THEME_SETTING',
      themeSetting: {
        navbarTheme: '',// 导航栏颜色
        colorValue: '',// 字体颜色
      },
      navbarThemes: [
        {themeName: '默认', color: "###", isSwitch: false},
        {themeName: '黑暗', color: "#2d3436", isSwitch: true},
      ],
      fontThemes: [
        {color: '#000', isChecked: false},
        {color: '#2A82E4', isChecked: true},
        {color: '#d63031', isChecked: false},
        {color: '#FA541C', isChecked: false},
        {color: '#FAAD14', isChecked: false},
        {color: '#13C2C2', isChecked: false},
        {color: '#65d8d8', isChecked: false},
        {color: '#52C41A', isChecked: false},
        {color: '#1890FF', isChecked: false},
        {color: '#722ED1', isChecked: false}
      ]
    }
  },

  mounted() {
    // token不存在不启动
    let token = document.cookie
    console.log(token, 'token', /token/g.test(token))
    if (!/token/g.test(token)) {
      return
    }
    if (this.$route.path === '/login' || this.$route.path === '/about' || this.$route.path === '/problem' || this.$route.path === '/providerApply') {
      return
    } else {
      this.initThemeSetting()
      this.settingBtnVisble = true
    }
  },
  computed: {
  },
  methods: {
    handlerBtnClick(color) {
      this.navbarThemes.forEach(item => {
        item.isSwitch = false
        if (item.color === color) {
          item.isSwitch = true
        }
      })
      document.body.setAttribute("data-navtheme", color)
      this.themeSetting.navbarTheme = color
    },
    handlerFontTheme(color) {
      this.fontThemes.forEach(item => {
        item.isChecked = false
        if (item.color === color) {
          item.isChecked = true
        }
      })
      document.body.setAttribute("data-fonttheme", color)
      this.themeSetting.colorValue = color
    },
    // 抽屉关闭保存 设置
    handlerDrawerClose() {
      this.storage(this.themeSetting)
    },
    storage(value) {
      if (!value) {
        let result = window.localStorage.getItem(this.localThemeName)
        if (!result) {
          return null
        }
        return JSON.parse(result)
      } else {
        value = JSON.stringify(value)
        window.localStorage.setItem(this.localThemeName, value)
      }
    },
    initThemeSetting(localTheme) {
      if (!localTheme) {
        localTheme = this.storage()
      }
      if (localTheme) {
        this.themeSetting = localTheme
        this.handlerBtnClick(localTheme.navbarTheme)
        this.handlerFontTheme(localTheme.colorValue)
      } else {
        return null
      }
    }
  },
  watch: {
    $route(to, from) {
      if (to.path === '/login' || to.path === '/about' || to.path === '/problem' || to.path === '/providerApply') {
        this.initThemeSetting({
          navbarTheme: '#2d3436',
          colorValue: '#2A82E4'
        })
        this.settingBtnVisble = false
      } else {
        this.initThemeSetting()
        this.settingBtnVisble = true
      }
    }
  }
}
</script>

<style lang='scss'>
@import "./theme.scss";
.theme-btn {
  position: fixed;
  top: 0;
  right: 0;
  top: 80%;
  z-index: 2000;
  .theme-btn-open {
    transform: translateX(50%);
    transition: transform .5s;
  }
  .theme-btn-open:hover {
    transform: translateX(0);
  }
}
.theme {
  padding: 0 20px;
  color: black;
  .theme-navbar {
    margin: 10px 0;
  }
  .el-button {
    border: none;
    box-shadow: 0 4px 6px 0 #777;
  }
  .font-theme-block {
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 12px;
    margin: 10px 10px;
    border-radius: 4px;
    box-shadow: 0 4px 5px 0 #888;
    .el-icon-check {
      position: absolute;
      top: 4px;
      left: 4px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      text-shadow: 0 0 3px #333;
    }
  }
}
.el-drawer__wrapper {
  height: 100vh;
  .el-button i {
    font-weight: bold;
    font-size: 18px;
  }
  .theme-block {
    margin: 10px 0 20px;
    .el-radio-button {
      margin: 0 20px;
    }
  }
  :focus {
    outline: none;
  }
}
@media only screen and (max-width: 1180px) {
  .theme-btn {
    top: 260px;
  }
}
</style>